/*
 * jQcssplay-er - v1.0
 * (c) 2013 CSSplay - Stu Nicholls
 *
 * http://www.cssplay.co.uk
 *
 */
 .cssplay-er {border:5px solid #000; border-width:5px 30px;border-radius:10px; position:relative; background:#000; overflow:hidden; box-shadow:0 15px 10px -10px rgba(0,0,0,0.6);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-touch-action: none;
-moz-touch-action: none;
-o-touch-action: none;
-ms-touch-action: none;
touch-action: none;
}

.cssplay-er .controls {position:absolute; left:10px; right:10px; bottom:10px; height:40px; background: rgba(0,0,0,0.5); border-radius:5px; z-index:1000; display:none;}
.cssplay-er .progressBar {position:absolute; cursor:pointer; left:70px; right:150px; top:15px; height:10px; background:#069; box-shadow: inset 0 3px 3px rgba(0,0,0,0.4);}
.cssplay-er .progressBar:hover {cursor:pointer;}
.cssplay-er .timeBar {position:absolute; cursor:pointer; top:0; left:0; width:0; height:10px; background:#6cf; box-shadow: inset 0 -3px 3px rgba(0,0,0,0.4);}
.cssplay-er .volumeBar{display:block; position:absolute; left:0; top:0; cursor:pointer; height:10px; background:url(volume.png) no-repeat left center; z-index:10;}
.cssplay-er .volume{position:absolute; cursor:pointer; right:65px; width:50px; top:15px; height:10px; background:#069; box-shadow: inset 0 3px 3px rgba(0,0,0,0.4);}
.cssplay-er .playButton {display:block; width:20px; height:20px; background:url(play.png) no-repeat left top; position:absolute; left:5px; top:10px; cursor:pointer;}
.cssplay-er .current {font:bold 10px/15px arial, sans-serif; color:#ddd; position:absolute; left:30px; top:12px;}
.cssplay-er .duration {font:bold 10px/15px arial, sans-serif; color:#ddd; position:absolute; right:30px; top:12px;}
.cssplay-er .sound {display:block; width:20px; height:20px; background:url(mute.png) no-repeat left top; position:absolute; right:120px; top:10px; cursor:pointer;}
.cssplay-er .sound.muted {background-position:left bottom;}
.cssplay-er .fullScreen {display:block; width:20px; height:20px; background:url(fullscreen.png) no-repeat left top; position:absolute; right:5px; top:10px; cursor:pointer;}
.cssplay-er .poster {position:absolute; left:0; top:0; width:100%; height:100%; display:block;}

.playlist {font:normal 12px/18px 'Noto sans', arial, sans-serif; color:#666; text-transform:uppercase; cursor:pointer; display:inline-block; padding:0 20px;}
.playlist {*display:inline;}
.playlist:hover {color:#333;}
.playlist.chosen {color:#000;}

.videoOne {width:70%; height:auto; max-width:640px; min-width:250px; margin:10px auto;}
.videoTwo {width:50%; height:auto; max-width:640px; min-width:250px; margin:10px auto;}
.videoThree {width:80%; height:auto; max-width:800px; min-width:250px; margin:10px auto;}

.cssplay-er.play-pause .controls {left:50%; top:50%; margin:-64px 0 0 -64px; background: transparent; z-index:1000; display:none;}
.cssplay-er.play-pause .progressBar,
.cssplay-er.play-pause .timeBar, 
.cssplay-er.play-pause .volumeBar,
.cssplay-er.play-pause .volume,
.cssplay-er.play-pause .current, 
.cssplay-er.play-pause .duration, 
.cssplay-er.play-pause .sound,
.cssplay-er.play-pause .fullScreen {display:none;}
.cssplay-er.play-pause .playButton {display:block; width:128px; height:128px; background:url(play-pause.png) no-repeat left top; cursor:pointer;;}

@media only screen and (max-device-width : 1024px)  {
.cssplay-er .playButton, 
.cssplay-er.play-pause .playButton {display:none;}
.cssplay-er .current {left:10px;}
.cssplay-er .progressBar {left:50px;}
}